import { RootState } from '../../store/index'
import React from 'react'
import style from './Seller.module.scss'
import { useSelector } from 'react-redux'
import { Rate } from 'antd';


const Seller:React.FC = () => {

  const sellerList = useSelector((state:RootState) => state.seller.sellerList)
  console.log(sellerList)


  return (
    <div className={style.content}>
      <div className={style.header}>
        <div className={style.name}>
          <div>
            <h4>{sellerList?.name}</h4>
            <div className={style.sell}>
              <Rate disabled defaultValue={4} />
              ({sellerList?.ratingCount})
              月售{sellerList?.sellCount}单
            </div>
          </div>
          <p>收藏</p>
        </div>
        <div className={style.price}>
          <p>起送价{sellerList?.minPrice}元</p>
          <p>商家配送{sellerList?.deliveryPrice}元</p>
          <p>平均配送时间{sellerList?.deliveryTime}分钟</p>
        </div>
      </div>
      <div className={style.splite}></div>
      <div className={style.notice}>
        <h4>公告与活动</h4>
        <p>{sellerList?.bulletin}</p>
        {sellerList?.supports.map((item,index) => 
          <span key={item.type}>{index + 1}  {item.description}</span>
        )}
      </div>
      <div className={style.splite}></div>
      <div className={style.sellerPics}>
        <h4>商家实景</h4>
        <div className={style.pics}>
          {sellerList?.pics.map((it,index) => 
            <img src={it} alt="" width={120} height={90} key={index}/>
          )}
        </div>
      </div>
      <div className={style.splite}></div>
      <div className={style.info}>
        <h4>商家信息</h4>
        {sellerList?.infos.map((item,index) =>
          <p key={index}>{item}</p>
        )}
      </div>
    </div>
  )
}

export default Seller